
<template>
  <page-card title="任务管理">
    <div class="table-page-search-wrapper">
      <slot name="searchWrapper" />
      <a-row v-if="!$slots.searchWrapper"
             type="flex"
             style="margin-bottom:20px"
             justify="end">

        <a-col v-if="hasPermission('add')"
               flex="1">
          <a-space>
            <slot name="buttons" />
            {{ $slots.buttons }}
            <template v-if="!$slots.buttons">
              <a-button type="primary"
                        icon="plus"
                        @click="handleEdit()">
                新增
              </a-button>
            </template>
          </a-space>
        </a-col>
        <template>
          <a-col :span="4"
                 style="display:flex;justify-content:space-between;">
            <slot name="search" />
            <a-input-search style="width:240px"
                            v-if="!$slots.search"
                            v-model="queryParam.jobName"
                            placeholder="任务名称"
                            allow-clear
                            @search="search" />
            <!-- <a-input-search style="width:240px"
                            v-if="!$slots.search"
                            v-model="queryParam.jobGroup"
                            placeholder="任务组"
                            allow-clear
                            @search="search" /> -->
          </a-col>
        </template>
      </a-row>
    </div>
    <slot name="table" />
    <a-table v-if="!$slots.table"
             :columns="columns"
             :rowKey="(record, index) => index"
             :data-source="data"
             @change="handleTableChange"
             :pagination="pagination">
      <span slot="status"
            slot-scope="text, record">
        <a-popconfirm :title="record.status == '1' ? '是否关闭' : '是否开启'"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="onChange(record.id,record.status)">
          <a-switch :checked="record.status == '1' ? true : false" />
        </a-popconfirm>
      </span>
      <span slot="action"
            slot-scope="text, record">
        <template v-for="(action, index) in actions">
          <span :key="index">
            <a-divider type="vertical"
                       v-if="index>0" />
            <a v-if="action.code!='delete'"
               @click="action.fn(record.id,record.name)">
              {{ action.text }}
            </a>
            <a-popconfirm v-else
                          title="确认删除？"
                          ok-text="是"
                          cancel-text="否"
                          @confirm="action.fn(record.id)">
              <a href="javascript:;">
                {{ action.text }}
              </a>
            </a-popconfirm>
          </span>
        </template>
      </span>
    </a-table>
  </page-card>
</template>

<script>
import { PAGINATION, TABLE_STATUS_CELL } from '../../constants'
import { listTask, startTask, stopTask, deleteTask } from '../../api/quartz'
export default {
  props: {
    onLoad: {
      type: Function,
      default: null
    },
    onDelete: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      data: [],
      pagination: PAGINATION,
      statusCell: TABLE_STATUS_CELL,
      queryParam: {},
      actions: [],
      columns: [
        {
          title: '任务名称',
          align: 'center',
          width: 200,
          dataIndex: 'jobName'
        },
        {
          title: '任务组',
          align: 'center',
          width: 180,
          dataIndex: 'jobGroup',
          ellipsis: true
        },
        {
          title: 'cron表达式',
          align: 'center',
          width: 180,
          dataIndex: 'cronExpression'
        },
        {
          title: '调用接口',
          align: 'center',
          width: 450,
          ellipsis: true,
          dataIndex: 'invokeTarget'
        },
        {
          title: '状态',
          width: 100,
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        }
      ]
    }
  },
  created () {
    let width = 180,
      me = this
    if (this.hasPermission('edit') && (width += 28)) {
      this.actions.push({
        text: '编辑',
        code: 'edit',
        fn: this.handleEdit
      })
    }
    if (this.hasPermission('delete') && (width += 28)) {
      this.actions.push({
        text: '删除',
        code: 'delete',
        fn: this.handleDelete
      })
    }
    if (this.actions.length > 0) {
      this.columns.push({
        title: '操作',
        width: width,
        align: 'center',
        scopedSlots: { customRender: 'action' }
      })
    }
    // 未重写table，调用默认加载列表数据接口
    !this.$route.meta.keepAlive && !this.$slots.table && this.load()
  },
  activated () {
    // 未重写table，调用默认加载列表数据接口
    !this.$slots.table && this.load()
  },
  methods: {
    onChange (id, status) {
      if (status == '1') {
        stopTask(id).then(res => {
          this.load()
        })
      } else {
        startTask(id).then(res => {
          this.load()
        })
      }
    },
    search () {
      this.pagination.current = 1
      this.load()
    },
    load () {
      this.queryParam.currPage = this.pagination.current
      this.queryParam.pageSize = this.pagination.pageSize
      if (this.onLoad) {
        listTask({ ...this.queryParam }).then((response) => {
          this.data = response.list
          this.pagination.current = response.currPage
          this.pagination.total = response.totalCount
          this.pagination.pageSize = response.pageSize
        })
      } else {
        listTask({ ...this.queryParam }).then((response) => {
          this.data = response.list
          this.pagination.current = response.currPage
          this.pagination.total = response.totalCount
          this.pagination.pageSize = response.pageSize
        })
      }
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.load()
    },
    handleEdit (id) {
      this.$router.push({
        path: '/task/edit',
        query: { id }
      })
    },
    handleDelete (id) {
      if (this.onDelete) {
        this.onDelete(id).then((response) => {
          this.load()
        })
      } else {
        deleteTask(id).then((res) => {
          this.message.success('删除成功')
          this.load()
        })
      }
    }
  }
}
</script>

<style>
</style>
